<template>
    <div>
        <van-nav-bar title="我的收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit"
            v-for="item in list" :key="item.id" />
        <van-action-sheet v-model:show="show" title="标题" v-for="item in list1" :key="item.id">
            <div class="content">
                <van-address-edit :area-list="areaList" :address-info="addressinfo" show-postal show-delete
                    show-set-default :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave" @delete="onDelete(item.ress_code)" @change-detail="onChangeDetail" />
            </div>
        </van-action-sheet>


    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { ressList, adddizhi, deldizhi } from '@/api/http';
import { areaList } from '@vant/area-data';
import { addressList } from '@/assets/code/addres'
import router from '@/router';
const onClickLeft = () => history.back();
const chosenAddressId = ref('1');
// const list = [
//     {        
//         id: '1',
//         name: '张三',
//         tel: '13000000000',
//         address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
//         isDefault: true,
//     },
// ];

// const text: any = ref('默认')


let list: any = ref([])
let list1: any = ref([])


onMounted(() => {
    console.log(777777, localStorage.getItem('user_code'));
    ressList({ userCode: localStorage.getItem('user_code') }).then((res: any) => {
        console.log('获取收货地址', res);
        list1.value = res.responseData
        // onDelete(list1.value.ress_code)
        let arr: any = []
        list1.value.forEach((item: any, index: any) => {
            console.log(item);

            // JSON.stringify(item).replace('ress_name', 'name').replace('ress_mobile', 'tel')
            let arr1 = {
                id: item.ress_id,
                name: item.ress_name,
                tel: item.ress_mobile,
                address: item.ress_ressCode + item.ress_detail,
                isDefault: item.ress_default,
            }
            arr.push(arr1)
            if (item.ress_default == '1') {
                arr1.isDefault = undefined
            }
            console.log('arr', arr);
            list.value = arr
            console.log(list.value);

        });
    })
})
// JSON.stringify(list.value).replace('ress_name', 'name').replace('ress_mobile', 'tel')



console.log(777777, localStorage.getItem('user_code'));

const show = ref(false)
const searchResult = ref([]);
// 保存
const onSave = (content: any) => {
    console.log(content);
    // 添加地址接口
    adddizhi({
        ress_userCode: localStorage.getItem('user_code'),//用户 id,
        ress_name: content.name,//收货人姓名
        ress_mobile: content.tel,//收货人手机号
        ress_detail: content.addressDetail,//收货地址详情
        ress_type: 1,//1 家 2 公司 3 学校
        ress_default: content.isDefault,//1 非默认 2 默认
        ress_code: content.areaCode,//收货省市区地址
        ress_ressCode: content.addressDetail,//收货地址 code(空代表新增、有则代表修改)
        ress_text: content.addressDetail
    }).then((res: any) => {
        console.log('ddddd', res);
    })

};

const onChangeDetail = (val: any) => {
    if (val) {
        searchResult.value = [

        ];
    } else {
        searchResult.value = [];
    }
};
const addressinfo = ref({})
// 添加收货地址
const onAdd = () => {
    show.value = true
    addressinfo.value = {}
};

// 编辑收货地址
const onEdit = (item: any) => {
    // onDelete(item.id)
    console.log(item);
    show.value = true
    // if (item.isDefault == '2') {
    //     item.isDefault = true
    // } else 
    // if (item.isDefault == '1') {
    //     item.isDefault = false
    // }
    // 往初始值里面写东西
    addressinfo.value = {
        id: item.id,
        name: item.name,
        tel: item.tel,
        addressDetail: item.address,
        isDefault: item.isDefault == '2' ? true : false,
    }

}// 删除
const onDelete = (id: any) => {
    deldizhi({ ress_userCode: localStorage.getItem('user_code'), ress_code: id }).then(res => {
        console.log(res);
    })
    router.go(0)
};
</script>
<style lang="scss">
#app {
    margin: 0;
    padding: 0;
}
</style>